<!--
@Time:2021/12/1 12:02
@File:set_avatar.py
@Author:常雷
@Software:PyCharm
-->
{% extends 'base.html' %}
<title>Title</title>
{% block content %}
    <h3 class="text-center">修改头像</h3>
    <form action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <p>
            原头像:
            <img src="/media/{{ request.user.avatar }}" alt="" width="100" height="100">
        </p>
        <p>
            <div class="form-group">
                {% load static %}
                <label for="myfile">新头像:
                    <img width="100" height="100" src="{% static 'img/default.png' %}" id="myimg" alt="" width="80" style="margin-left: 1px">
                </label>
                <input type="file" id="myfile" name="avatar" style="display: none">
            </div>
        </p>
        <input type="submit" class="btn btn-info">
    </form>
{% endblock %}

{% block js %}
    <script>
        $("#myfile").change(function () {
            // 利用文件阅读器对象
            // 1.先生成文件阅读器对象
            let myFileReaderObj = new FileReader();
            //2.获取用户上传的头像文件
            let fileObj = $(this)[0].files[0];
            //3.将文件对象交给阅读器对象读取
            myFileReaderObj.readAsDataURL(fileObj) ; //异步操作(执行过客), 又是IO操作需要时间,所以需要等待
            //等待xxx加载完毕再执行显示
            myFileReaderObj.onload = function () {
                //4.利用文件阅读器将文件展示到前端页面   修改img的src属性
                $('#myimg').attr('src', myFileReaderObj.result)
            }
        });
    </script>
{% endblock %}